<template>
  <a-affix :offset-top="56" class="w-[100%]">
    <div class="bg-white">
      <arrow-left-outlined
        v-if="$route.meta.isBack"
        class="text-[#0083ff] w-[18px] mr-[16px]"
        @click="$router.back()"
      />
      <span class="whitespace-nowrap">{{ $route.meta.title }}</span>
      <a-tooltip
        v-if="isAdRoute"
        overlayClassName="banner-tooltip"
        :overlayStyle="{ width: '212px', height: '350px', borderRadius: '3px' }"
        color="#fff"
        placement="rightTop"
      >
        <template #title>
          <div class="ad-box" v-if="$route.name === 'StartAd'">
            <img class="w-[188px] h-[334px]" src="@/assets/icon/start-ad.jpg" alt="" />
          </div>
          <div class="ad-box" v-else-if="$route.name === 'DialogAd'">
            <img class="w-[188px] h-[334px]" src="@/assets/icon/dialog-ad.jpg" alt="" />
          </div>
          <div class="ad-box" v-else-if="$route.name === 'FloatingAd'">
            <img class="w-[188px] h-[334px]" src="@/assets/icon/bottom-ad.jpg" alt="" />
          </div>
          <div class="ad-box" v-else-if="$route.name === 'BeforePlayAd'">
            <img class="w-[188px] h-[334px]" src="@/assets/icon/before-ad.jpg" alt="" />
          </div>
          <div class="ad-box" v-else-if="$route.name === 'PauseAd'">
            <img class="w-[188px] h-[334px]" src="@/assets/icon/pause-ad.jpg" alt="" />
          </div>
          <div class="ad-box" v-else-if="$route.name === 'ColumnAd'">
            <img class="w-[188px] h-[334px]" src="@/assets/icon/column-ad.jpg" alt="" />
          </div>
        </template>
        <a class="banner-tooltip-text"> <i class="iconfont icon-guanggao"></i><span>广告位置示意图</span> </a>
      </a-tooltip>
    </div>
  </a-affix>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const ROUTES = ['StartAd', 'DialogAd', 'FloatingAd', 'BeforePlayAd', 'PauseAd', 'ColumnAd']
console.log('route.name: ', route.name)
const isAdRoute = computed(() => {
  return ROUTES.includes(route.name as string)
})
</script>

<style lang="scss" scoped></style>
